<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:21
-->
<template>
  <div class="home">
    <!-- 轮播图开始 -->
    <div class="carousel">
        <el-carousel height="300px">
      <el-carousel-item v-for="item in carousels" :key="item.id">
        <img width="100%" :src="item.url" alt="">
      </el-carousel-item>
    </el-carousel>
    </div>
 <!-- 轮播图结束 -->

 <!-- 研学项目开始 -->
 <div class="projects">
  <div class="wrapper">
  <div class="title">精选游学项目</div>
  <div @click="projectHandler(item.id)" class="project" v-for="item in projects" :key="item.id">
    <div class="left">
      <img width="100%"  :src="item.figure" alt="">
    </div>
    <div class="right">
      <div class="name">{{item.name}}</div>
      <div class="time">2021.1.23~2021.2.3</div>
      <div class="content">{{item.introduce}}</div>
    </div>
  </div>
  </div>
 </div>
 <!-- 研学项目结束 -->

 <!-- 学生风采开始 -->
 <div class="article">
  <div class="wrapper">
    <div class="title">学生风采</div>
    <div class="art">
      <div @click="articleHandler(item.id)" class="left" v-for="item in articles" :key="item.id">
        <div class="pic">
          <img width="100%" :src="item.cover" alt="">
        </div>
        <div class="text">
          <div class="content">{{item.title}}</div>
          <div class="time">2021</div>
          <div class="name">{{item.baseUser.realname}}</div>
          <div class="star"><i class="iconfont icon-xianxingshoucang"></i>&nbsp;&nbsp;{{item.thumpUp}}</div>
        </div>
      </div>
    </div>
  </div>
 </div>
 <!-- 学生风采结束 -->

 <!-- 常见问题开始 -->
 <div class="aways">
 <div class="question">常见问题</div>
 <div class="child">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</div>
 <p class="datae">其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。 </p>
   <div class="pho">
     <img width="100%" height="100%" src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="">
   </div>
   <div class="good">参加夏令营到底有什么好处？</div>
   <div class="tex"> 国外流行的游学夏令营一般都是有一个主题的，宗旨是让一群年轻的小朋友聚在一起，在导师的带领下参加围绕该主题
     的活动，促进友谊的同时，可以和有共同兴趣爱好的人一起学习、交流分享。所以夏令营是让孩子们拓展视野的好时机，比如你的小孩从小
     就有表演天分，可是作为家长却不知道应该怎么做让她/他进一步的发挥，那参加表演艺术主题的夏令营就可以给予一定的指导和空间，甚至
     会安排小舞台让她/他进行表演，而往往因这样的机缘巧合也会更加容易收获真挚的友情。EF英孚夏令营除了有学习语言为主的夏令营活动，
     也有各式主题类型的国际夏令营，比如足球夏令营、探险夏令营、冲浪夏令营、马术夏令营、表演明星课程、时尚和艺术工作室等。 </div>
 <div class="ph">
   <img width="100%" height="100%" src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="">
 </div>
 </div>
 
 <!-- 常见问题结束 -->
  </div>
</template>
<script>
import {get} from '../utils/request'
export default{
  data(){
    return{
      carousels:[],
      list:{
        page:1,
        pageSize:3
      },
      params:{
        page:1,
        pageSize:3,
        status:'审核通过'
      },
      projects:[],
      articles:[]
    }
  },
  methods:{
     //  查询轮播图
  findAllCarousel(){
    // 数据交互
    get('/index/carousel/findAll').then(res=>{
      // console.log(res);
       if(res.status == 200){
      this.carousels = res.data
   }else{
     this.$message({
       type:'error',
      message:res.message
     })
   }
    })
  },
  // 查询所有研学项目
  findAllProjects(){
   get('/index/project/pageQuery',this.list).then(res=>{
     if(res.status == 200){
       this.projects = res.data.list
     }else{
       this.$message({
         type:'error',
         message:res.message
       })
     }
   })
  },
  // 查询所有学生风采
  findAllArticle(){
   get('/index/article/pageQuery',this.params).then(res=>{
   if(res.status == 200){
     this.articles = res.data.list
   }else{
     this.$message({
       type:'error',
       message:res.message
     })
   }
 })
  },
  projectHandler(id){
    this.$router.push({path:'/project',query:{id:id}})
  },
  articleHandler(id){
this.$router.push({path:'/article',query:{id:id}})
},
  },
created(){
  // 调用查询所有栏目信息的方法
this.findAllCarousel(),
this.findAllProjects(),
this.findAllArticle()
}
}
</script>

<style scoped lang="scss">
.projects{
  .wrapper{
    width: 1240px;
    // height: 500px;
    .title{
      font-size: 20px;
      line-height: 4em;
      border-bottom:1px solid #f4f4f4;
    }
    .project{
      display: flex;
      padding: 1em 0;
      border-bottom:1px solid #f4f4f4;
      .left{
        width: 300px;
        height: 200px;
        background-color: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
      }
      .right{
        flex: 1;
        padding: 0 2em;
        .name{
          font-weight: 600;
          font-size: 15px;
        }
        .time{
          margin: 1em 0;
        }
        .content{
          line-height: 2em;
        }
      }
    }
  }
}

.article{
  .wrapper{
    .title{
     font-size: 20px;
     line-height: 4em;
    }
    .art{
      display: flex;
      justify-content: space-between;
      .left{
        flex-basis: 24%;
        cursor: pointer;
        .pic{
          width: 100%;
          height: 160px;
          border-radius: 5px;
          overflow: hidden;
      }
      .text{
        padding: 1em 1em;
        line-height: 2em;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      .text:hover{
        background-color: #f4f4f4;
      }
    }
  }
}
}

.aways{
  width: 1204px;
  height: 1460px;
  padding: 2em 0;
  margin: 0 auto;
  .question{
    height: 40px;
   font-size: 20px;
   font-weight: 700;
   color: #333;
  }
  .child{
    height: 32px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }
  .datae{
    height: 138px;
    font-size: 14px;
    color: #999;
    letter-spacing: 1px;
    text-indent: 2em;
    line-height: 2em;
  }
  .pho{
    width: 800px;
    height: 500px;
  }
  .good{
    height: 32px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-top: 35px;
  }
  .tex{
    height: 127px;
    font-size: 14px;
    color: #999;
    letter-spacing: 1px;
    text-indent: 2em;
    line-height: 2em;
    margin-top: 20px;
  }
  .ph{
    width: 800px;
    height: 500px;
  }
}
</style>